var P3 = function (game) {

  this.create = function () {
    ClosePage(game, '3_0', '3', '3_r', '3_w');

    function Page(game, cbg, mbg, rbg, wbg) {
      var flagAry = [0, 0, 0, 0];
      var bg = game.add.sprite(0, 0, mbg);
      bg.anchor.setTo(0, 0);

      var bimgs = ['3_00', '3_1', '3_2', '3_3'];

      var graphics = game.add.graphics(0, 0);
      drawGraphics();

      function drawGraphics() {
        graphics.clear();
        for (var i = 0; i < 4; i++) {
          if (flagAry[i] === 1) {
            graphics.lineStyle(8, 0xca9e52, 1);
          } else {
            graphics.lineStyle(8, 0xdbdddc, 1);
          }
          graphics.beginFill(0x1666a5, 1);
          var cir=graphics.drawCircle(700 + i * 145, 431, 110);
          cir.data=i;
        }
      }
        var group = game.add.group();
      for (var i = 0; i < 4; i++) {
        var button = game.add.button(630 + i * 140, 360, bimgs[i], actionOnClick, this, 2, 1, 0);
        button.data = i;
        group.add(button);
      }

      function actionOnClick(arg) {
        graphics.getChildAt()
        flagAry.forEach(function (item, i) {
          if (i != arg.data) {
            flagAry[i] = 0;
          }
        })
        flagAry[arg.data] = flagAry[arg.data] === 0 ? 1 : 0;
        drawGraphics();
      }


      game.add.button(1100, 630, imgs['prev'], onPrev, this, 2, 1, 0);
      game.add.button(1250, 630, imgs['submit'], onSubmit, this, 2, 1, 0);
        function onPrev() {
            game.goState('back');
            group.destroy();
        }
      function onSubmit(arg) {
        //container.destroy();
          if (flagAry.join('_') === '0_0_1_0') {
            RightPage(game, cbg, mbg, rbg, wbg);
          } else {
            WrongPage(game, cbg, mbg, rbg, wbg);
          }
      }
    }

    function ClosePage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');
      var close = game.add.button(0, 0, cbg, onClose, this, 2, 1, 0);
      container.addChild(close);

      function onClose() {
        container.destroy();
        Page(game, cbg, mbg, rbg, wbg);
      }
    }

      function WrongPage(game, cbg, mbg, rbg, wbg) {
          var container = game.add.sprite(0, 0, '');

          var bg = game.add.image(0, 0, wbg);
          container.addChild(bg);

          var next = game.add.button(1250, 630, imgs['retry'], onClick, this, 2, 1, 0);
          container.addChild(next);
          function onClick() {
              container.destroy();
              Page(game, cbg, mbg, rbg, wbg);
          }
      }

    function RightPage(game, cbg, mbg, rbg, wbg) {
      var container = game.add.sprite(0, 0, '');
      var bg = game.add.image(0, 0, rbg);
      container.addChild(bg);
      var next = game.add.button(1250, 630, imgs['next'], onClick, game, 2, 1, 0);
      container.addChild(next);

      function onClick() {
        game.goState('next');
      }
    }
  }


}





